<template>
  <div class="w-full relative lg:h-[240px] lg:flex lg:items-end">
    <!-- 背景图 -->
    <div class="absolute inset-0 w-full h-full">
      <img
        :src="data.imageUrl"
        alt="Product Banner"
        class="w-full h-[87%] lg:h-[75%] object-cover blur-lg lg:blur-xl opacity-45" />
      <div
        class="absolute w-full h-full lg:h-[240px] left-0 top-0 bg-gradient-to-b from-[rgba(253,252,252,0.12)] lg:from-[rgba(175,172,172,0.27)] from-[40%] to-[100%] to-[#3c3d3dc0] lg:to-[#3738386e]"></div>
    </div>
    <!-- info -->
    <div class="w-full lg:w-100 lg:mx-auto">
      <div class="relative z-30 text-white py-5 lg:py-0 lg:flex items-end">
        <!-- 商品图 -->
        <div class="pb-5 flex lg:-mb-10 lg:ltr:mr-10 lg:rtl:ml-10 justify-center">
          <!-- <img
            class="w-[144px] lg:w-[180px] object-cover rounded-xl cursor-pointer"
            src="public/v2/home-imgs/intro-img2.webp"
            alt="" /> -->
          <YImage
            :src="data.imageUrl"
            alt=""
            class="w-[144px] lg:w-[200px] lg:h-[250px] h-[192px] object-cover rounded-xl cursor-pointer" />
        </div>
        <!-- 商品信息 -->
        <div class="flex flex-col items-center lg:items-start lg:pb-5">
          <h1 class="text-xl lg:text-2xl mb-2.5">{{ data.title }}</h1>
          <div class="lg:flex lg:items-center">
            <!-- icon -->
            <!-- <div class="flex items-center justify-center mr-4 lg:mr-6 my-2">
              <w-image
                class="mr-1 lg:mr-3 w-4 h-4 lg:w-5 lg:h-5"
                :src="useAsset('detail/item_icon_region.png')"
                :alt="''" />
              <w-image
                class="mr-1 w-4 h-4 lg:w-5 lg:h-5"
                :src="useAsset('detail/item_icon_fast.png')"
                alt="Instant Delivery" />
            </div> -->
            <!-- text -->
            <div class="flex items-center lg:px-0 px-10 w-full justify-center text-xs">
              <div v-if="data.publisher" class="flex items-center mr-4">
                <span class="mr-4">{{ data.publisher }}</span>
                <span class="hidden lg:block text-[#939292]">/</span>
              </div>
              <div v-if="data.language" class="flex items-center mr-4">
                <span class="mr-4">{{ data.language }}</span>
                <span class="hidden lg:block text-[#939292]">/</span>
              </div>
              <div v-if="data.region" class="flex items-center mr-4">
                <span class="mr-4">{{ data.region }}</span>
                <span class="hidden lg:block text-[#939292]">/</span>
              </div>
              <div v-if="data.platform" class="flex items-center">
                <span class="">{{ data.platform }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
const props = defineProps(['data'])
</script>

<style lang="scss"></style>
